import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-20 18:35:37
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 17:54:21
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProcessBroad\components\ProductionSum.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import './pSum.less';
import { Progress, Table } from 'antd';
import { useEffect, useRef, useState } from 'react';
import styles from './productionSum.module.less';
export default (props) => {
    const { data, moQty, isFull } = props;
    const makerTable = useRef();
    const containerRef = useRef();
    const [makerColumns, setMakerColumns] = useState([]);
    const [makerData, setMakerData] = useState([]);
    const [scrollHeight, setScrollHeight] = useState(0);
    // 制单表头
    useEffect(() => {
        const columns = [
            {
                title: '制单款号',
                dataIndex: 'styleCode',
                key: 'styleCode',
                align: 'center'
            },
            {
                title: '总数',
                dataIndex: 'amount',
                key: 'amount',
                align: 'center'
            },
            {
                title: '已完成',
                dataIndex: 'finishedAmount',
                key: 'finishedAmount',
                align: 'center'
            },
            {
                title: '未完成',
                dataIndex: 'unFinishedAmount',
                key: 'unFinishedAmount',
                align: 'center'
            },
            {
                title: '剩余库存',
                dataIndex: 'residueStockQty',
                key: 'residueStockQty',
                align: 'center'
            },
            {
                title: '进度',
                dataIndex: 'progress',
                key: 'progress',
                align: 'center',
                render: (_value, row) => {
                    const { finishedAmount, amount } = row;
                    const pNumber = Math.round((finishedAmount / amount) * 100);
                    const color = () => {
                        if (pNumber <= 25) {
                            return '#DD2A2A';
                        }
                        if (pNumber <= 50 && pNumber > 25) {
                            return '#F7B500';
                        }
                        if (pNumber <= 75 && pNumber > 50) {
                            return '#0EC5DF';
                        }
                        if (pNumber > 75) {
                            return '#44D7B6';
                        }
                    };
                    return (_jsx("div", { style: {
                            display: 'flex',
                            whiteSpace: 'nowrap',
                            paddingRight: '16px'
                        }, children: _jsx(Progress, { strokeColor: color(), trailColor: "#072C88", style: { color: '#fff' }, percent: pNumber }) }));
                }
            }
        ];
        setMakerColumns(columns);
    }, []);
    // 制单表格数据
    useEffect(() => {
        if (data && data.length) {
            console.log(data, 'data--------');
            setMakerData(data);
        }
    }, [data]);
    // 制单表格滚动
    useEffect(() => {
        if (makerTable && makerTable.current) {
            const target = makerTable.current.getElementsByClassName('ant-table-body');
            setInterval(() => {
                target[0].scrollTop += 1;
                if (target[0].scrollTop >=
                    target[0].scrollHeight - target[0].clientHeight) {
                    target[0].scrollTop = 0;
                }
            }, 64);
        }
    }, [makerTable]);
    useEffect(() => {
        setTimeout(() => {
            const t = document.getElementsByClassName('ant-table-thead')?.[0];
            t.style.boxSizing = 'border-box';
            const sHeight = makerTable.current.clientHeight - t.clientHeight;
            setScrollHeight(sHeight - 20);
        }, 100);
    }, []);
    return (_jsxs("div", { className: styles.container, id: "pTable", ref: containerRef, children: [_jsxs("header", { className: styles.sumHeader, children: ["\u751F\u4EA7\u4E2D\u5236\u5355\u6570\u91CF\uFF1A", moQty || 0] }), _jsx(Table, { className: styles.sumTable, ref: makerTable, pagination: false, rowKey: 'moId', columns: makerColumns, dataSource: makerData, scroll: { y: scrollHeight } })] }));
};
